<template>
  <div>
    <!-- RA朗读句子题型 -->
    <main v-if="exerciseDetail.typeCode == 'RA'">
      {{ exerciseDetail.content }}
    </main>
    <!-- 朗读句子录音 -->
    <div id="aplayer">
      <div>
        <!-- <Aplayer
          v-if="exerciseDetail.typeCode == 'RA'"
          :url="exerciseDetail.url"
        ></Aplayer> -->
      </div>
    </div>

    <!-- WE文章写作类型 -->
    <main v-if="exerciseDetail.typeCode == 'WE'">
      {{ exerciseDetail.content }}
    </main>

    <!-- RS 重复句子题型 -->
    <main v-if="exerciseDetail.typeCode == 'RS'">
      <Audioplayer
        v-if="exerciseDetail.url"
        :url="exerciseDetail.url"
      ></Audioplayer>
    </main>
    <div id="aplayer">
      <div>
        <!-- 注意url需要使用学生上传的录音 ：未修改-->
        <!-- <Aplayer
          v-if="exerciseDetail.typeCode == 'RS'"
          :url="exerciseDetail.url"
        ></Aplayer> -->
      </div>
    </div>

    <!-- DI描述图片题型 -->
    <main v-if="exerciseDetail.typeCode == 'DI'">
      <div class="img-box" @click="imgScc" :class="{ active: isChoose }">
        <img :src="exerciseDetail.url" v-if="exerciseDetail.url" alt="" />
      </div>
    </main>

    <!-- ASQ短问答题型, SST 录音总结题型 ,WFD听写句子 , SMW 选择缺少单词-->
    <main v-if="exerciseDetail.typeCode == 'ASQ'">
      <Audioplayer
        :url="exerciseDetail.url"
        v-if="exerciseDetail.url"
      ></Audioplayer>
    </main>
    <div id="aplayer">
      <div>
        <!-- 注意url需要使用学生上传的录音 ：未修改-->
        <!-- <Aplayer
          v-if="exerciseDetail.typeCode == 'ASQ'"
          :url="exerciseDetail.url"
        ></Aplayer> -->
      </div>
    </div>

    <main v-if="exerciseDetail.typeCode == 'RL'">
      <Audioplayer
        v-if="exerciseDetail.url"
        :url="exerciseDetail.url"
      ></Audioplayer>
    </main>
    <div id="aplayer">
      <div>
        <!-- 注意url需要使用学生上传的录音 ：未修改-->
        <!-- <Aplayer
          v-if="exerciseDetail.typeCode == 'RL'"
          :url="exerciseDetail.url"
        ></Aplayer> -->
      </div>
    </div>

    <main v-if="exerciseDetail.typeCode == 'SST'">
      <Audioplayer
        v-if="exerciseDetail.url"
        :url="exerciseDetail.url"
      ></Audioplayer>
    </main>
    <main v-if="exerciseDetail.typeCode == 'WFD'">
      <Audioplayer
        v-if="exerciseDetail.url"
        :url="exerciseDetail.url"
      ></Audioplayer>
    </main>

    <!-- SMW选择缺少单词 -->
    <main v-if="exerciseDetail.typeCode == 'SMW'">
      <Audioplayer
        :url="exerciseDetail.url"
        v-if="exerciseDetail.url"
      ></Audioplayer>
    </main>
    <div class="select_box">
      <div class="select_miss" v-for="(item, index) in optionSMW" :key="index">
        <span :class="selected"></span>{{ item }}
      </div>
    </div>

    <!-- FIBRW 段落填空 -->
    <main v-if="exerciseDetail.typeCode == 'FIBRW'">
      <Audioplayer
        :url="exerciseDetail.url"
        v-if="exerciseDetail.url"
      ></Audioplayer>
    </main>
    <div class="fibrw" v-if="exerciseDetail.typeCode == 'FIBRW'">
      <span v-for="(item, index) in optionFIBRW" :key="index"
        >{{ item }}
        <span
          class="fibrw_user_answer"
          v-for="(item1, index1) in answer"
          :key="index1"
          ><span v-if="index1 == index">{{ item1 }}</span></span
        >
        <span
          id="fibrw_stand_answer"
          v-for="(item2, index2) in fibrwSubjectAnswer"
          :key="index2"
          ><span v-if="index2 == index">({{ item2 }})</span></span
        >
      </span>
    </div>

    <!-- RP排序题型 -->
    <main v-if="exerciseDetail.typeCode == 'RP'">
      <div v-for="(item, index) in optionsRP" :key="index" class="options_rp">
        <span class="idxRp">{{ index + 1 }}</span
        >{{ item }}
      </div>
    </main>
    <!-- FIBR 阅读填空题型 -->
    <main v-if="exerciseDetail.typeCode == 'FIBR'">
      <span v-for="(item, index) in optionsFIBR" :key="index"
        >{{ item }}
        <span v-for="(item2, index2) in answer" :key="index2">
          <span id="blanks" v-if="index2 == index"> {{ item2 }}</span>
        </span>
        <div
          class="sub_ans"
          v-for="(item1, index1) in fibrsubjectAnswer"
          :key="index1"
        >
          <span v-if="index1 == index"> ({{ item1 }})</span>
        </div>
      </span>
    </main>

    <!-- HCS 多项选择摘要题型 -->
    <main v-if="exerciseDetail.typeCode == 'HCS'">
      <Audioplayer
        :url="exerciseDetail.url"
        v-if="exerciseDetail.url"
      ></Audioplayer>
    </main>
    <div class="hcs_box">
      <div class="desc">{{ exerciseDetail.describe }}</div>
      <div class="hcs_op" v-for="(item, index) in optionHCS" :key="index">
        <span></span>{{ item }}
      </div>
    </div>

    <!-- HIW识别错词 -->
    <main v-if="exerciseDetail.typeCode == 'HIW'">
      <Audioplayer
        :url="exerciseDetail.url"
        v-if="exerciseDetail.url"
      ></Audioplayer>
      <div class="hiw_content">{{ exerciseDetail.content }}</div>
    </main>

    <!-- FIB 听力填空 -->
    <main v-if="exerciseDetail.typeCode == 'FIB'">
      <Audioplayer
        :url="exerciseDetail.url"
        v-if="exerciseDetail.url"
      ></Audioplayer>
    </main>
    <div class="fib_box">
      <span v-for="(item, index) in contentFIB" :key="index"
        >{{ item }}
        <span v-for="(item1, index1) in standAnsFIB" :key="index1"
          ><span v-if="index == index1">{{ item1 }}</span></span
        >

        <span
          class="subAnsFIB"
          v-for="(item2, index2) in subAnsFIB"
          :key="index2"
          ><span v-if="index == index2">({{ item2 }})</span></span
        >
      </span>
    </div>

    <!-- MCS单选听力 -->
    <main
      v-if="
        exerciseDetail.typeCode == 'MCS' &&
        exerciseDetail.subjectType == '2' &&
        exerciseDetail.url
      "
    >
      <Audioplayer
        :url="exerciseDetail.url"
        v-if="exerciseDetail.url"
      ></Audioplayer>
    </main>
    <div
      class="mcs_box"
      v-if="
        exerciseDetail.typeCode == 'MCS' && exerciseDetail.subjectType == '2'
      "
    >
      <div class="desc">{{ exerciseDetail.describe }}</div>
      <div v-for="(item, index) in optionMCSListen" :key="index" class="mcs_op">
        <span></span>
        {{ item }}
      </div>
    </div>

    <!-- 阅读单选MCS -->
    <main
      v-if="
        exerciseDetail.typeCode == 'MCS' && exerciseDetail.subjectType == '3'
      "
    >
      {{ exerciseDetail.content }}
    </main>
    <div
      class="mcs_box"
      v-if="
        exerciseDetail.typeCode == 'MCS' && exerciseDetail.subjectType == '3'
      "
    >
      <div class="desc">{{ exerciseDetail.describe }}</div>
      <div v-for="(item, index) in optionMCSRead" :key="index" class="mcs_op">
        <span></span>
        {{ item }}
      </div>
    </div>

    <!-- MCM 多选 -->
    <!-- RA朗读句子题型 -->
    <main v-if="exerciseDetail.typeCode == 'MCM'">
      {{ exerciseDetail.content }}
    </main>
    <!-- 题目描述：所有题型都有 -->
    <div class="mcm_box" v-if="exerciseDetail.typeCode == 'MCM'">
      <div class="desc">{{ exerciseDetail.describe }}</div>
      <div class="mcm_op" v-for="(item, index) in optionMCM" :key="index">
        <span></span>{{ item }}
      </div>
    </div>

    <!-- 题目描述：所有题型都有 -->
    <!-- <div class="desc">{{ exerciseDetail.describe }}</div> -->

    <!-- 学生提交的答案区域 -->
    <div class="stu_ans" v-if="exerciseDetail.answer">学生答案</div>
    <!-- <div class="stu_ans_box" v-if="exerciseDetail.answer"></div> -->
    <div
      v-if="
        exerciseDetail.typeCode == 'RA' ||
        exerciseDetail.typeCode == 'RS' ||
        exerciseDetail.typeCode == 'RL' ||
        exerciseDetail.typeCode == 'DI' ||
        exerciseDetail.typeCode == 'ASQ'
      "
      class="stu_ans_box"
    >
      <Aplayer
        :url="exerciseDetail.answer"
        v-if="exerciseDetail.answer"
      ></Aplayer>
    </div>
    <div v-else class="sub-answer">{{ exerciseDetail.answer }}</div>

    <!-- 参考答案及批注区域 -->
    <div class="answer_Pz">
      <div class="operate">
        <div v-if="exerciseDetail.subjectAnswer">参考答案</div>
        <div class="btn prev" @click="toPrev">上一题</div>
        <div class="btn next" @click="toNext">下一题</div>
      </div>
    </div>
    <div class="answer_box">
      {{ exerciseDetail.subjectAnswer }}
    </div>

    <!-- 老师批注 -->
    <div class="pz">老师批注</div>

    <div class="ypz" v-if="exerciseDetail.isPz == '1'">
      {{ exerciseDetail.comments }}
    </div>

    <div v-if="exerciseDetail.isPz == '0'">
      <el-form v-model="pzForm">
        <el-form-item>
          <el-input type="textarea" v-model="pzForm.desc"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <div class="submitBtn" @click="submitComment">提交</div>
  </div>
</template>

<script>
import Aplayer from '../../Aplayer'
import Audioplayer from '../../Audioplayer'
export default {
  props: ['exerciseDetail', 'nickname'],
  components: {
    Aplayer,
    Audioplayer,
  },
  data () {
    return {
      pzForm: {
        desc: '' // 老师批注
      },
      isChoose: false,
      optionsRP: [], // RP题型选项
      optionsFIBR: [], // FIBR题型数据
      optionSMW: [], // SMW 题型数据
      optionMCM: [], // MCM
      fibrsubjectAnswer: [], // FIBR参考答案
      answer: [], // 学生的答案
      optionFIBRW: [], // FIBRW 数据
      fibrwSubjectAnswer: [], // FIBRW 参考答案
      optionMCSRead: [],
      optionMCSListen: [],
      optionHCS: [],
      contentFIB: [],
      subAnsFIB: [],
      standAnsFIB: [],

    }
  },
  created () {
    this.handleRpData()
    this.handleFIBRData()
    this.handleSelectMiss()
    this.handleFIBRW()
    this.handleMCM()
    this.handleMCSRead()
    this.handleMCSListen()
    this.handleHCS()
    this.handleFIB()

    var workList = JSON.parse(sessionStorage.getItem('workList'))
    var idx = sessionStorage.getItem('index')
    console.log(workList[idx]);
  },
  methods: {
    // 上一题
    toPrev () {
      console.log('prev');
      var idx = sessionStorage.getItem('index')
      if (idx > 1) {
        this.$emit('toPrevDetail')
      } else {
        this.$emit('noPrev')
      }

    },

    // 下一题
    toNext () {
      console.log('next');

      var workList = JSON.parse(sessionStorage.getItem('workList'))
      var idx = sessionStorage.getItem('index')
      console.log(idx, workList.length);
      
      if (idx < workList.length) {
        this.$emit('toNextDetail')
      } else {
        this.$emit('noNext')
      }
    },


    // 提交批注时触发
    submitComment () {
      // 参数携带评论内容
      if (this.pzForm.desc.trim().length) {
        this.$emit('submitComment', this.pzForm.desc)
        this.pzForm.desc = '' // 提交后清空输入框
      } else {
        // 没批注就提交
        this.$msg.info('请批注后提交!')
      }
    },
    // 处理FIB数据
    handleFIB () {
      if (this.exerciseDetail.typeCode == 'FIB') {
        this.contentFIB = this.exerciseDetail.content.split('(PARAM)')
        this.subAnsFIB = this.exerciseDetail.subjectAnswer.split(',')
        if (this.exerciseDetail.answer) {
          this.standAnsFIB = this.exerciseDetail.answer.split(',')
        }
      }
    },

    // 处理HCS数据
    handleHCS () {
      if (this.exerciseDetail.typeCode == 'HCS') {
        this.optionHCS = this.exerciseDetail.option.split('&@#')
      }
    },

    // 处理单选MCS听力数据
    handleMCSListen () {
      if (this.exerciseDetail.typeCode == 'MCS' && this.exerciseDetail.subjectType == '2') {
        this.optionMCSListen = this.exerciseDetail.option.split('&@#')
      }
    },
    // 处理单选MCS阅读数据
    handleMCSRead () {
      if (this.exerciseDetail.typeCode == 'MCS' && this.exerciseDetail.subjectType == '3') {
        this.optionMCSRead = this.exerciseDetail.option.split('&@#')
      }
    },
    // 处理MCM多选题型数据
    handleMCM () {
      if (this.exerciseDetail.typeCode == 'MCM') {
        this.optionMCM = this.exerciseDetail.option.split('&@#')
      }
    },
    // 处理FIBRW 段落填空数据
    handleFIBRW () {
      if (this.exerciseDetail.typeCode == 'FIBRW') {
        this.optionFIBRW = this.exerciseDetail.content.split('(PARAM)')
        this.fibrwSubjectAnswer = this.exerciseDetail.subjectAnswer.split(',')
        if (this.exerciseDetail.answer) {
          this.answer = this.exerciseDetail.answer.split(',')
        }
      }
    },
    // 处理缺少单词题型数据
    handleSelectMiss () {
      if (this.exerciseDetail.typeCode == 'SMW') {
        this.optionSMW = this.exerciseDetail.option.split('&@#')
      }
    },
    // 处理FIBR题型数据
    handleFIBRData () {
      if (this.exerciseDetail.typeCode == 'FIBR') {
        this.optionsFIBR = this.exerciseDetail.content.split('(PARAM)')
        this.fibrsubjectAnswer = this.exerciseDetail.subjectAnswer.split(',')
        if (this.exerciseDetail.answer) {
          this.answer = this.exerciseDetail.answer.split(',')
        }
      }
    },
    // 处理RP题型数据
    handleRpData () {
      if (this.exerciseDetail.typeCode == 'RP') {
        var str = this.exerciseDetail.option
        console.log(str.split('&@#'));
        var ary = str.replace(/&@#/g, ',').split(',')
        console.log(ary);
        this.optionsRP = str.split('&@#')
      }
    },
    // 图片的点击缩放
    imgScc: function () {
      this.isChoose = !this.isChoose
    }

  },
}
</script>

<style lang="less" scoped>
main {
  text-align: left;
  font-size: 1.125rem;
  color: #666;
  left: 2rem;
  border: 0.125rem dashed #ff5e4e;
  padding: 1.25rem 1.5rem;
  margin-top: 1rem;
  .answers {
    display: flex;
  }
  .answer_Pz {
    margin-top: 2rem;
    text-align: left;
    font-size: 1.75rem;
    font-weight: bold;
    display: flex;
    .operate {
      display: flex;
      .btn {
        margin: auto 0;
        height: 2.2rem;
        padding: 0 0.5rem;
        line-height: 2.2rem;
        background-color: #ff5e4e;
        color: #fff;
        text-align: center;
        border-radius: 0.375rem;
        font-size: 1.125rem;
        cursor: pointer;
      }
      .prev {
        margin-left: 57.5rem;
        margin-right: 1rem;
      }
    }
  }
  .answer_box {
    margin-top: 1.2rem;
    text-align: left;
    font-size: 1.75rem;
  }
  .pz {
    font-size: 1.75rem;
    color: #13bfbf;
    text-align: left;
    margin-top: 2rem;
    font-weight: bold;
  }
  .ypz {
    text-align: left;
    font-size: 1.125rem;
    color: #13bfbf;
    text-indent: 2em;
    line-height: 2rem;
  }
  .submitBtn {
    float: right;
    width: 4rem;
    height: 2.2rem;
    padding: 0 0.5rem;
    line-height: 2.2rem;
    background-color: #ff5e4e;
    color: #fff;
    text-align: center;
    border-radius: 0.375rem;
    font-size: 1.125rem;
    cursor: pointer;
  }
  .el-input {
    font-size: 1.125rem !important;
  }
}
.sub-answer {
  font-size: 1.75rem;
  text-align: left;
  margin-top: 2rem;
}
#aplayer {
  margin: 2.5rem auto;
  div {
    margin: 0 auto;
  }
}

.stu_ans {
  font-size: 1.75rem;
  text-align: left;
  margin-top: 2rem;
  font-weight: bold;
}
.stu_ans_box {
  padding: 1.25rem 0;
  font-size: 1.75rem;
  color: #666;
  text-align: left;
}

.img-box {
  // width: 38.1875rem;
  // height: 20.1875rem;
  margin: auto;
  transform: scale(1); /*图片原始大小1倍*/
  transition: all ease 0.5s;
  img {
    width: 100%;
    height: 100%;
  }
}
.active {
  transform: scale(1.6); /*图片需要放大3倍*/
  z-index: 100;
}

// RP题型
.idxRp {
  display: inline-block;
  width: 1.875rem;
  height: 1.5rem;
  background-color: #ff5e4e;
  color: #fff;
  vertical-align: middle;
  border-radius: 0 0.75rem 0.75rem 0;
  font-size: 1.25rem;
  line-height: 1.5rem;
  padding-left: 0.375rem;
  margin-right: 0.6rem;
}
.options_rp {
  margin-bottom: 1rem;
  font-size: 1.125rem;
}

.sub_ans {
  display: inline-block;
  height: 2.5rem;
  line-height: 2.5rem;
  padding: 0 0.375rem;
  font-size: 1.25rem;
  color: #13bfbf;
  text-align: center;
}
.subAnsFIB {
  color: #13bfbf;
}
#blanks {
  display: inline-block;
  width: 7.5rem;
  height: 1.875rem;
  line-height: 1.875rem;
  text-align: center;
  // padding: 0 0.375rem;
  color: #333;
  border: 0.0625rem solid #ccc;
  border-radius: 0.5rem;
  vertical-align: middle;
}

.select_box {
  background-color: #eee;
  padding-left: 1.25rem;
  .select_miss {
    cursor: pointer;
    position: relative;
    margin-top: 1rem;
    text-align: left;
    font-size: 1.125rem;
    color: #666;
    padding: 0 1.25rem;
    span {
      position: absolute;
      border: 1px solid #dcdfe6;
      border-radius: 100%;
      width: 14px;
      height: 14px;
      left: 0;
      top: 0.3125rem;
      background-color: #fff;
      cursor: pointer;
    }
    .selected {
      background-color: #ff5e4e;
      border: 1px solid #ff5e4e;
    }
  }
}

.fibrw {
  border: 1px dashed #dcdfe6;
  padding: 1.25rem;
  margin-top: 2rem;
  text-align: left;
  font-size: 1.125rem;
  color: #666;
  line-height: 3rem;
  .fibrw_stand_answer {
    display: inline-block;
    border: 1px solid #eee;
    height: 1.875rem;
    line-height: 1.875rem;
    width: 6.25rem;
  }
}
#fibrw_stand_answer {
  color: #13bfbf !important;
  font-weight: bold;
}

.desc {
  font-weight: bold;
  margin-bottom: 1rem;
  margin-top: 2rem;
  padding: 0 1.25rem;
  text-align: left;
  font-size: 1.125rem;
  line-height: 1.875rem;
}
// MCM
.mcm_box {
  margin-top: 2rem;
  padding: 0 1.25rem;
  text-align: left;
  font-size: 1.125rem;
  line-height: 1.875rem;
  .mcm_op {
    position: relative;
    padding-left: 1.875rem;
    span {
      position: absolute;
      border: 1px solid #dcdfe6;
      border-radius: 0.1875rem;
      box-sizing: border-box;
      width: 0.875rem;
      height: 0.875rem;
      left: 0;
      top: 0.5rem;
      background-color: #fff;
    }
  }
}

// 单选
.mcs_box {
  margin-top: 2rem;
  font-size: 1.125rem;
  color: #666;
  text-align: left;
  .mcs_op {
    position: relative;
    padding-left: 2.5rem;
    span {
      position: absolute;
      border: 1px solid #dcdfe6;
      border-radius: 100%;
      width: 14px;
      height: 14px;
      left: 1rem;
      top: 0.375rem;
      background-color: #fff;
    }
  }
}

// HCS
.hcs_box {
  text-align: left;
  color: #666;
  font-size: 1.125rem;
  .hcs_op {
    position: relative;
    padding-left: 2.5rem;
    line-height: 2.5rem;
  }
  span {
    position: absolute;
    border: 1px solid #dcdfe6;
    border-radius: 0.125rem;
    box-sizing: border-box;
    width: 0.875rem;
    height: 0.875rem;
    left: 1rem;
    top: 0.8125rem;
    background-color: #fff;
  }
}

// HIW
.hiw_content {
  margin-top: 2rem;
  line-height: 2.5rem;
}

.fib_box {
  text-align: left;
  color: #666;
  font-size: 1.125rem;
  margin-top: 2rem;
  padding: 1.25rem;
  line-height: 2.5rem;
}
</style>
